<template>
  <el-dialog
      title="密码找回"
      :visible="dialogVisible"
      width="500">

    <!-- 密码找回表单 -->
    <el-form :model="formData" :rules="rules" ref="passRecoveryForm">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item label="密保问题" prop="secretSecurity">
        <el-input v-model="formData.secretSecurity" disabled></el-input>
      </el-form-item>
      <el-form-item label="密保答案" prop="secretSecurityAnswer">
        <el-input v-model="formData.secretSecurityAnswer"></el-input>
      </el-form-item>

      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="formData.newPassword" :disabled="!canInputNewPass"></el-input>
      </el-form-item>
    </el-form>
    <!-- 密码找回表单 end -->

    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:dialogVisible',false)">取 消</el-button>
      <el-button type="primary" @click="passwordRecoveryDialog">找 回</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {getUserSecretSecurity, changePassword} from '@/api/user'

export default {
  name: "PasswordRecovery",
  props: ['dialogVisible'],
  data() {
    // 校验用户名
    const usernameValidate = (rule, value, callback) => {
      if (value === '') callback('请输入用户名')
      // 防抖
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(async () => {
        // 找后端获取一下用户的密保问题
        let result = await getUserSecretSecurity(value);
        if (result.errno === 1003) {
          callback('用户名不存在');
        } else if (result.errno === 0) {
          this.formData.secretSecurity = result.data.secretSecurity;
          this.formData.curSecretSecurityAnswer = result.data.secretSecurityAnswer;
          callback();
        }
      }, 500)
    }

    // 密保答案校验
    const secretSecurityAnswerValidate = (rule, value, callback) => {
      this.canInputNewPass = false;
      if (value === '') callback('请输入密保回答');
      if (value !== this.formData.curSecretSecurityAnswer) {
        callback('密保答案错误');
      } else {
        // 密保答案正确 允许输入新密码
        this.canInputNewPass = true;
        callback();
      }
    }

    return {
      formData: {
        username: '', // 用户名
        secretSecurity: '', // 密保
        secretSecurityAnswer: '', // 用户回答的密保答案
        curSecretSecurityAnswer: '', // 正确用户回答的密保答案
        newPassword: '', // 新密码
      },
      rules: {
        username: [
          {validator: usernameValidate, trigger: 'change'}
        ],
        secretSecurityAnswer: [
          {validator: secretSecurityAnswerValidate, trigger: 'change'}
        ],
        newPassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
        ]
      },
      timer: null,
      canInputNewPass: false, // 控制是否能输入新密码了
    }
  },
  methods: {
    passwordRecoveryDialog() {
      // 校验
      this.$refs['passRecoveryForm'].validate(async (valid) => {
        if (valid) {  // 通过
          let {errno} = await changePassword(this.formData);
          if (errno === 0) {
            // 成功消息
            this.$message({
              message: '成功',
              type: 'success'
            })
            // 关闭对话框
            this.$emit('update:dialogVisible', false);
          }
        } else { // 校验失败
          return false;
        }
      });
    }
  }
}
</script>

<style scoped lang="less">

</style>